<template>
	<view class="main">
		<view class="topview">
			<view class="topview-left">
				<!-- <view class="topview-left-userImg"> -->
				<image class="userImg"
					:src="userinfo.avatar?userinfo.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'">
				</image>
				<!-- <view class="leftview-userbgview">
						
					</view> -->
				<!-- </view> -->
				<view class="topview-left-userBgView">
					<view>
						<label class="topview-left-userlab">{{userinfo.nickName}}</label>
					</view>
					<view class="topview-right-item-lab2" style="font-size: 13px;text-align: left;">
						{{userinfo.userName}}
					</view>
				</view>
			</view>
			<view class="topview-right">
				<view class="topview-right-item">
					<label class="topview-right-item-lab">上级</label>
					<label class="topview-right-item-lab2">{{userinfo.pnickName==null?'':userinfo.pnickName}}</label>
				</view>
				<view class="topview-right-item">
					{{userinfo.puserName}}
				</view>
			</view>
		</view>
		<view class="cybtn">
			<view class="qrcode" @click="getqrcode" >
				推广二维码
			</view>
			<view class="totgcompy" @click="navtotgcom">
				查看推广企业
			</view>
		</view>
		
		<u-overlay :show="showuploadImage">
				<view class="autloading" style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
					<u-loading-icon :show="showuploadImage" color="white"></u-loading-icon>
				</view>
				
		</u-overlay>
		
		<u-popup :show="showqrcode"  :round="10" mode="center"  closeable="true"  @close="offqrcode" closeOnClickOverlay="true" customStyle="overflow: hidden;" >
		            <view class="qrcodeimg">
		                <image :src="bufferImg" mode="" style="width: 100%; height: 100%;" :show-menu-by-longpress="true"></image>
		            </view>
					<view class="" style="margin: 20rpx auto; font-size: 30rpx;">
					长按二维码保存至相册
				</view>
		</u-popup>
		
		
		
		<view class="zhituiview">
			<label class="tip-lab">直推数据总揽</label>
			<view class="zhituiview-item">
				<view class="zhituiview-item-view">
					<view>{{directCount.competeRegisterCount}}</view>
					<view>注册登录</view>
				</view>
				<view class="zhituiview-item-view">
					<view>{{directCount.competeUserInfoCount}}</view>
					<view>完善资料</view>
				</view>
				<view class="zhituiview-item-view">
					<view>{{directCount.competeCardCount}}</view>
					<view>发布名片</view>
				</view>
				<view class="zhituiview-item-view">
					<view>{{directCount.competeRealNameCount}}</view>
					<view>实名认证</view>
				</view>
			</view>
		</view>
		<view class="zhituiview">
			<label class="tip-lab">间接数据总揽</label>
			<view class="zhituiview-item">
				<view class="zhituiview-item-view">
					<view>{{indirectCount.competeRegisterCount}}</view>
					<view>注册登录</view>
				</view>
				<view class="zhituiview-item-view">
					<view>{{indirectCount.competeUserInfoCount}}</view>
					<view>完善资料</view>
				</view>
				<view class="zhituiview-item-view">
					<view>{{indirectCount.competeCardCount}}</view>
					<view>发布名片</view>
				</view>
				<view class="zhituiview-item-view">
					<view>{{indirectCount.competeRealNameCount}}</view>
					<view>实名认证</view>
				</view>
			</view>
		</view>
		<view class="buttom-list">
			<u-tabs :list="tabLiast" :is-scroll="false" :current="current" bar-width="50" active-color="orange"
				@change="change">
			</u-tabs>
			<view v-if="current == 0">
				<view class="listItem-view">
					<view class="list-top-item">用户</view>
					<view class="list-top-item">手机号</view>
					<view class="list-top-item">推广人数</view>
					<view class="list-top-item">完善信息</view>
					<view class="list-top-item">发布名片</view>
				</view>
				<block v-if="directList.length>0"></block>
				<view v-for="(item,index) in directList" :key="index">
					<view v-if="index%2==1" class="listItem-view" style="background-color: white;">
						<view class=" list-item">{{item.nickName==null?'':item.nickName}}</view>
					<view class="list-item">{{item.mobile}}</view>
					<view class="list-item">{{item.competeRegisterCount}}</view>
					<view class="list-item">{{item.competeUserInfoCount}}</view>
					<view class="list-item">{{item.competeCardCount}}</view>
				</view>
				<view v-if="index%2 ==0" class="listItem-view">
					<view class="list-item">{{item.nickName==null?'':item.nickName}}</view>
					<view class="list-item">{{item.mobile}}</view>
					<view class="list-item">{{item.competeRegisterCount}}</view>
					<view class="list-item">{{item.competeUserInfoCount}}</view>
					<view class="list-item">{{item.competeCardCount}}</view>
				</view>
			</view>
			</block>
			<block v-if="directList.length == 0">
				<view class="empty-img">
					<image class="notdata-img" src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png">
					</image>
					<label>暂无内容</label>
				</view>
			</block>
		</view>
		<view v-if="current == 1">
			<view class="listItem-view">
				<view class="list-top-item">用户</view>
				<view class="list-top-item">手机号</view>
				<view class="list-top-item">完善信息</view>
				<view class="list-top-item">发布名片</view>
				<view class="list-top-item">实名认证</view>
			</view>
			<block v-if="inDirectList.length>0"></block>
			<view v-for="(item,index) in inDirectList" :key="index">
				<view v-if="index%2==1" class="listItem-view" style="background-color: white;">
				<view class=" list-item">{{item.nickName==null?'':item.nickName}}</view>
				<view class="list-item">{{item.mobile}}</view>
				<view class="list-item">
					<image class="list-item-img"
						:src="item.isInfoAll?'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/realName.png':'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/notrealName.png'">
					</image>
				</view>
				<view class="list-item">
					<image class="list-item-img"
						:src="item.isPublishCard?'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/realName.png':'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/notrealName.png'">
					</image>
				</view>
				<view class=" list-item">
					<image class="list-item-img"
						:src="item.isRealName?'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/realName.png':'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/notrealName.png'">
					</image>
				</view>
				</view>
				
				<view v-if="index%2==0" class="listItem-view">
				<view class=" list-item">{{item.nickName==null?'':item.nickName}}</view>
				<view class="list-item">{{item.mobile}}</view>
				<view class="list-item">
					<image class="list-item-img"
						:src="item.isInfoAll?'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/realName.png':'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/notrealName.png'">
					</image>
				</view>
				<view class="list-item">
					<image class="list-item-img"
						:src="item.isPublishCard?'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/realName.png':'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/notrealName.png'">
					</image>
				</view>
				<view class=" list-item">
					<image class="list-item-img"
						:src="item.isRealName?'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/realName.png':'https://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/notrealName.png'">
					</image>
				</view>
				</view>
			</view>
		</view>
	</view>
	</block>
	<block v-if="inDirectList.length == 0">
		<view class="empty-img">
			<image class="notdata-img" src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png">
			</image>
			<label>暂无内容</label>
		</view>
	</block>
	</view>
	</view>
	</view>
</template>

<script>
	import Index from "@/common/index-model.js"
	import fun from '@/common/publicFun.js'
	let index = new Index()
	let that = null
	export default {
		data() {
			return {
				tabLiast: [{
						name: '直推'
					},
					{
						name: '间推'
					}
				],
				directCount: {},
				indirectCount: {},
				selectId: '直推',
				current: 0,
				iscomshow: false,
				userinfo: {},
				Nnterprises: [], //可切换的企业
				currindex: -1,
				userId: 0,
				records: {},
				inDirectList: [], //间推
				directList: [], //直推
				bufferImg: '', // 存储二维码的 URL
				showqrcode: false,
				showuploadImage:false
			}
		},
		onLoad(options) {
			console.log('传过来的值是:', options)
			this.userId = options.userid
			this.getUserInfo()
			this.getzhiTuinumInfo()
			this.getjianTuinumInfo()
			this.getzhijieDatasource()
			this.getzjianjieDatasource()
		},
		methods: {
			navtotgcom(){
				index.navigate_to('../../pagesC/tgcompylist/tgcompylist')
			},
			offqrcode(){
				this.showqrcode = false
			},
			//生成分享码
			getqrcode(){
				this.showuploadImage = true
				index.getPublicUserMember({path: 'pages/user/index',code:uni.getStorageSync('userid')}, "/client/share/wxQrcode", 'get', res => {
					if (res.data.code == 200) {
						this.bufferImg = res.data.result
						this.showqrcode = true
						this.showuploadImage = false
					}else{
						index.show_tips('二维码请求失败')
						this.showuploadImage = false
					}
				})
				
			},
			
			
			
			change(index) {
				this.current = index.index;
				//如报错则用this.current = index.index;代替上面这句
			},
			getUserInfo() {
				index.getPublicUserMember({}, "/system/promotionStatistics/user/" + this.userId, 'get', res => {
					if (res.data.code == 200) {
						this.userinfo = res.data.result
						console.log('代理用户信息', this.userinfo)
						uni.showModal({
							title: '系统提示',
							content: res.data.result,
							showCancel: true,
							cancelText: '取消',
							success: function(res) {}
						});
					}
				})
			},
			//直推统计数量
			getzhiTuinumInfo() {
				index.getPublicUserMember({}, "/system/promotionStatistics/directCount/" + this.userId, 'get', res => {
					if (res.data.code == 200) {
						this.directCount = res.data.result
						console.log('代理直推统计', this.directCount)
						uni.showModal({
							title: '系统提示',
							content: res.data.result,
							showCancel: true,
							cancelText: '取消',
							success: function(res) {}
						});
					}
				})
			},
			//间推统计数量
			getjianTuinumInfo() {
				index.getPublicUserMember({}, "/system/promotionStatistics/indirectCount/" + this.userId, 'get', res => {
					if (res.data.code == 200) {
						this.indirectCount = res.data.result
						console.log('代理间推统计', this.indirectCount)
						uni.showModal({
							title: '系统提示',
							content: res.data.result,
							showCancel: true,
							cancelText: '取消',
							success: function(res) {}
						});
					}
				})
			},
			getzhijieDatasource() {
				index.getPublicUserMember({
					'userId': this.userId,
					'pageNo': 1,
					'pageSize': 1000
				}, "/system/promotionStatistics/directList", 'get', res => {
					if (res.data.code == 200) {
						this.directList = res.data.result.records
						console.log('代理直推统计列表', res.data.result.records)
						uni.showModal({
							title: '系统提示',
							content: res.data.result,
							showCancel: true,
							cancelText: '取消',
							success: function(res) {}
						});
					}
				})
			},
			getzjianjieDatasource() {
				index.getPublicUserMember({
					'userId': this.userId,
					'pageNo': 1,
					'pageSize': 1000
				}, "/system/promotionStatistics/inDirectList", 'get', res => {
					if (res.data.code == 200) {
						this.inDirectList = res.data.result.records
						console.log('代理间接统计列表', res.data.result.records)
						uni.showModal({
							title: '系统提示',
							content: res.data.result,
							showCancel: true,
							cancelText: '取消',
							success: function(res) {}
						});
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		// background-image: linear-gradient(0.5turn, #8DC0FF, #FFFFFF);
		// background-size: 100% 400rpx;
		// background-repeat: no-repeat;
		background-color: #F3F3F3;
		/* linear-gradient(138deg, #004DFF 17%, #74E1FF 93%) */
	}

.autloading{
	position: absolute;
	margin: auto;
	width: 100%;
	height: 10vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.qrcodeimg{
		width: 500rpx;
		height: 550rpx;
		border-radius: 50rpx;
		margin-top: 80rpx;
		padding: 0 40rpx;
	}
	
	.cybtn{
		padding: 0 20rpx;
		box-sizing: border-box;
		margin: 20rpx;
		display: flex;	
		justify-content: space-around;
	}
	
	.totgcompy{
		width: 40%;
		height: 5vh;
		background-color: #5ac725;
		color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
.qrcode{
	width: 40%;
	height: 5vh;
	background-color: #0575FF;
	color: #ffffff;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.list-item-img {
		width: 15px;
		height: 15px;
	}

	.empty-img {
		padding-top: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.notdata-img {
		width: 200px;
		height: 200px;
	}

	.list-top-item {
		width: 20%;
		text-align: center;
		font-size: 12px;
	}

	.list-item {
		width: 20%;
		text-align: center;
		font-size: 12px;

	}

	.listItem-view {
		// margin-top: 10px;
		height: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.select-view {
		width: 30%;
		height: 50px;
		margin-top: 10px;
		margin-bottom: 45px;
		margin-left: 10px;
		// margin-right: 10rpx;

		.text-item {
			align-items: center;
			display: inline-block;
			width: 15%;

			text {
				width: 30%;
				font-size: 24rpx;
				border: none;
				height: 50rpx;
			}
		}
	}

	.line-Box {
		background-color: black;
		width: 40%;
		height: 3rpx;
		margin-top: 5rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
	}

	.line-Box1 {
		background-color: black;
		width: 40%;
		height: 3rpx;
		margin-top: 5rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
	}

	.buttom-list {
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.zhituiview {
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		height: 72pt;
		display: flex;
		background-color: #FFFFFF;
		flex-direction: column;
		border-radius: 5px;
	}

	.zhituiview-item-view {
		width: 25%;
		height: 100%;
	}

	.zhituiview-item {
		display: flex;
		flex-direction: row;
		padding: 15px;
		align-items: center;
		text-align: center;
	}

	.tip-lab {
		padding-left: 10px;
		font-size: 14px;
		color: #A1A1A1;
		height: 30px;
	}

	.topview-left-userImg {
		// padding-left: 12px;
		// padding-top: 12px;
		// padding-bottom: 12pt;
		// padding-right: 12pt;
		// width: 62pt;

	}

	.userImg {
		// padding-left: 12pt;
		width: 65pt;
		height: 50pt;
		padding-left: 5px;
		padding-top: 8px;
		padding-bottom: 8pt;
		//padding-right: 5pt;
	}

	.leftview-userbgview {
		position: relative;
		// padding-left: 15px;
		padding-top: 12pt;
		padding-bottom: 12pt;
		padding-right: 12pt;
		// width: 100%;
		// background-color:#FF5964;
	}

	.topview-left-userBgView {
		// padding-left: 5px;
		display: flex;
		flex-direction: column; //设置布局方向为竖直
		width: 100%;
		// background-color:#FF5964;
		align-items: flex-start;
	}

	.topview {
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		height: 72pt;
		display: flex;
		flex-direction: row; //设置布局方向为竖直
		align-items: center;
		border-radius: 5px;
	}

	.topview-left {
		background-color: #FFFFFF;
		width: 50%;
		display: flex;
		height: 72pt;
		flex-direction: row; //设置布局方向为竖直
		// text-align: center;
		border-radius: 5px;
	}

	.topview-right {
		border-radius: 5px;
		background-color: #E4F0FF;
		width: 50%;
		display: flex;
		height: 72pt;
		flex-direction: column; //设置布局方向为竖直
	}

	.topview-right-item {
		height: 50%;
		text-align: center;
	}

	.topview-right-item-lab {
		margin-top: 20px;
		width: 32pt;
		height: 21pt;
		background-color: #FF5964;
		color: #FFFFFF;
		font-size: 10pt;
	
	}

	.topview-right-item-lab2 {
		margin-top: 20px;
		color: #0F0F0F;
		font-size: 15pt;
		font-family: PingFang SC-Bold;
		padding-left: 5px;
	}

	.topview-left-userlab {
		// position:relative;
		//padding-top: 20px;
		margin-top: 350px;
		color: #0F0F0F;
		font-size: 13pt;
		font-family: PingFang SC-Bold;
		padding-left: 5px;
		text-align: left;
		background-color: #ffffff;
	}
</style>
<style scoped>
	/* @import url("/* @/static/css/publics.css");
	@import url("@/static/css/mybrowse.css");
	@import url("@/static/css/myBeInterested.css"); */
</style>